<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
        <title></title>
        <!-- 1. 倒入组件 -->
	    <script src="lib/vue.js"></script>
        <script src="lib/vue-router.js"></script>
        
        <link rel="stylesheet" href="./css/index.css">
        <script src="./js/main-html.js"></script>
	</head>

	<body>
		<div id="app">
			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="page-header">
						<h2>Router Basic - 01</h2>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2 col-xs-offset-2">
					<div class="list-group">
						<!-- 4. 使用指令v-link进行导航-->
						<router-link to="/foo">Go to Foo</router-link>
						<router-link to="/bar">Go to Bar</router-link>
						<!-- <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
						<a class="list-group-item" v-link="{ path: '/about'}">About</a> -->
					</div>
				</div>
				<div class="col-xs-6">
					<div class="panel">
						<div class="panel-body">
							<!-- 5. 用于渲染匹配的组件-->
							<router-view></router-view>
						</div>
					</div>
				</div>
			</div>
		</div>

        <script src="./js/main.js"></script>
	</body>
</html>